<template>
	<view class="collect-info">
		<u-form
			labelPosition="top"
			:model="formData"
			:rules="rules"
			labelWidth="240rpx"
			ref="form"
		>
			<u-form-item label="姓名" prop="name" required borderBottom>
				<u-input v-model="formData.name" placeholder="请输入" border="none" />
			</u-form-item>
			<u-form-item label="性别" prop="gender" required borderBottom>
				<view @click="showGenderPicker = true" class="flex-between">
					<u-text :text="formData.gender" v-if="formData.gender" color="#303133"></u-text>
					<u-text text="请选择" v-else color="#c0c4cc"></u-text>
					<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 30rpx;"></u-icon>
				</view>
				<u-picker
					:show="showGenderPicker"
					:columns="columns.gender" 
					@confirm="confirmPicker($event, 'gender')"
					@cancel="showGenderPicker = false"
				/>
			</u-form-item>
			<u-form-item label="手机号" prop="phone" required borderBottom>
				<u-input v-model="formData.phone" placeholder="请输入" border="none" type="number" />
			</u-form-item>
			<u-form-item label="年龄" prop="age" borderBottom>
				<u-input v-model="formData.age" placeholder="请输入" border="none" type="number" />
			</u-form-item>
			<u-form-item label="身份证" prop="idcard" borderBottom>
				<u-input v-model="formData.idcard" placeholder="请输入" border="none" type="idcard" />
			</u-form-item>
			<u-form-item label="是否已投保险" prop="insurance">
				<view @click="showInsurancePicker = true" class="flex-between">
					<u-text :text="formData.insurance" v-if="formData.insurance" color="#303133"></u-text>
					<u-text text="请选择" v-else color="#c0c4cc"></u-text>
					<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 30rpx;"></u-icon>
				</view>
				<u-picker
					:show="showInsurancePicker"
					:columns="columns.insurance" 
					@confirm="confirmPicker($event, 'insurance')"
					@cancel="showInsurancePicker = false"
				/>
			</u-form-item>
		</u-form>
		
		<view style="margin-top: 30rpx;">
			<u-text text="请填写真实信息，方便工作人员联系" color="#999" size="24rpx"></u-text>
		</view>
		
		<view class="bottom-add-btn">
			<u-button text="提交" shape="circle" @click="submit" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				name: ''
			},
			rules: {
				name: {
					required: true, 
					message: '请输入姓名',
					trigger: ['change'],
				},	
				gender: {
					required: true, 
					message: '请选择性别',
					trigger: ['change'],
				},
				phone: {
					required: true, 
					message: '请输入手机号',
					trigger: ['change'],
				}
			},
			showGenderPicker: false,
			showInsurancePicker: false,
			columns: {
				gender: [['男', '女']],
				insurance: [['是', '否']]
			},
		}
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		confirmPicker({ value }, key) {
			this.formData[key] = value.join('');
			this[`show${key[0].toUpperCase() + key.slice(1)}Picker`] = false;
		},
		async submit() {
			const valid = await this.$refs.form.validate();
			
			if (valid) {
				console.log(this.formData);
				
				uni.navigateTo({
					url: '/page_venues/pages/venuesDetail/ticketModule/makeOther'
				});
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.collect-info {
	background-color: rgb(243,243,243);
	min-height: 100vh;
	padding: 30rpx;
	padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
	
	/deep/.u-form {
		background-color: #fff;
		border-radius: 10rpx;
		
		.u-form-item {
			padding: 0 30rpx;
		}
	}
}
</style>
